<template>
  <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="startAutoPlay">
    <div
      ref="carouselList"
      class="carousel-list"
      :style="{ transform: `translateX(-${currentIndex * 100}%)`, transition: transitionStyle }"
      @transitionend="onTransitionEnd"
    >
      <div v-for="(item, index) in itemsWithClone" :key="index" class="carousel-item" :style="{ background: item.background }">
        {{ item.text }}
      </div>
    </div>

    <button class="arrow prev" @click="prevSlide">❮</button>
    <button class="arrow next" @click="nextSlide">❯</button>

    <div class="dots">
      <button
        v-for="(_, index) in items.length"
        :key="index"
        class="dot"
        :class="{ active: currentDotIndex === index }"
        @click="goToSlide(index)"
      ></button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { text: '1', background: '#ff6b6b' },
          { text: '2', background: '#4ecdc4' },
          { text: '3', background: '#45b7d1' },
          { text: '4', background: '#96ceb4' }
        ],
        currentIndex: 0,
        autoPlayTimer: null,
        transitionStyle: 'transform 0.5s ease-in-out'
      }
    },
    computed: {
      itemsWithClone() {
        // 添加克隆元素用于无缝衔接
        return [...this.items, this.items[0]]
      },
      currentDotIndex() {
        // 计算当前激活的指示点
        return this.currentIndex % this.items.length
      }
    },
    mounted() {
      this.startAutoPlay()
    },
    beforeDestroy() {
      this.pauseAutoPlay()
    },
    methods: {
      goToSlide(index, animate = true) {
        this.transitionStyle = animate ? 'transform 0.5s ease-in-out' : 'none'
        this.currentIndex = index
      },
      onTransitionEnd() {
        if (this.currentIndex >= this.items.length) {
          this.transitionStyle = 'none'
          this.currentIndex = 0
        }
      },
      nextSlide() {
        this.currentIndex++
        if (this.currentIndex > this.items.length) {
          this.transitionStyle = 'none'
          this.currentIndex = 1
          this.$nextTick(() => {
            this.transitionStyle = 'transform 0.5s ease-in-out'
            this.currentIndex++
          })
        }
      },
      prevSlide() {
        this.currentIndex = this.currentIndex <= 0 ? this.items.length : this.currentIndex - 1
      },
      startAutoPlay() {
        this.autoPlayTimer = setInterval(this.nextSlide, 3000)
      },
      pauseAutoPlay() {
        clearInterval(this.autoPlayTimer)
      }
    }
  }
</script>

<style scoped>
  /* 保持原有的CSS样式不变 */
  .carousel {
    position: relative;
    width: 95%;
    margin: 20px auto;
    overflow: hidden;
  }

  .carousel-list {
    display: flex;
  }

  .carousel-item {
    flex: 0 0 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
  }
  .prev {
    left: 20px;
  }
  .next {
    right: 20px;
  }
  .dots {
    bottom: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
  }
  .dot.active {
    background: white;
  }
</style>
